import * as THREE from "three";
import {
  CSS3DRenderer,
  CSS3DObject,
} from "three/examples/jsm/renderers/CSS3DRenderer.js";
import { watchEffect } from "vue";
import { ADS } from "../indexZJ";
import * as echarts from "echarts";

// 创建 CSS3DRenderer
const labelRenderer = new CSS3DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = "absolute";
labelRenderer.domElement.style.top = "0px";
labelRenderer.domElement.style.pointerEvents = "none";
document.body.appendChild(labelRenderer.domElement);

// 科技字体引入（确保在 index.html 中加上这一句）
// <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&display=swap" rel="stylesheet" />

// 创建科技感 ADS 标签
function createLabelads(id: string, title: string) {
  let statusDiv = document.getElementById(id) as HTMLDivElement;
  if (!statusDiv) {
    statusDiv = document.createElement("div");
    statusDiv.className = "fixed-label";
    statusDiv.id = id;

    // 🌌 科技感样式
    Object.assign(statusDiv.style, {
      position: "absolute",
      top: "20px",
      left: "30px",
      width: "300px",
      padding: "16px",
      borderRadius: "12px",
      color: "#0ff",
      fontSize: "16px",
      fontFamily: "'Orbitron', sans-serif",
      background: "rgba(0, 20, 40, 0.65)",
      border: "1px solid rgba(0, 255, 255, 0.3)",
      boxShadow:
        "0 0 20px rgba(0, 255, 255, 0.4), inset 0 0 10px rgba(0, 255, 255, 0.2)",
      backdropFilter: "blur(6px)",
      zIndex: "999",
    });

    document.body.appendChild(statusDiv);
  }

  // 监听 ADS 数据变化
  watchEffect(() => {
    statusDiv.innerHTML = "";

    const lines = [
      { label: "", value: title, color: "rgb(255, 170, 0)" },
      {
        label: "REALWGHT",
        value: `${ADS.ADS_SCALE1_REALWGHT} Kg`,
        color: "#00ff88",
      },
      { label: "IngreCode", value: ADS.IngreCode, color: "#00ff88" },
      { label: "IngreName", value: ADS.IngreName, color: "#00ff88" },
      { label: "TankNo", value: ADS.TankNo.toString(), color: "#00ff88" },
    ];

    lines.forEach(({ label, value, color }) => {
      const lineDiv = document.createElement("div");
      lineDiv.className = "statusLine";

      Object.assign(lineDiv.style, {
        display: "flex",
        justifyContent: "space-between",
        marginBottom: "6px",
        lineHeight: "1.5",
        fontWeight: "bold",
        color: "#fff",
      });

      if (label === "") {
        lineDiv.innerHTML = `<span style="color: ${color}; font-size: 20px;">${value}</span>`;
      } else {
        lineDiv.innerHTML = `
          <span style="color: #ccc;">${label}:</span>
          <span style="color: ${color};">${value}</span>`;
      }

      statusDiv.appendChild(lineDiv);
    });
  });

  return statusDiv;
}
function createDashboardPanel(id: string) {
  let wrapper = document.getElementById(id) as HTMLDivElement;
  if (!wrapper) {
    wrapper = document.createElement("div");
    wrapper.id = id;
    wrapper.className = "dashboard-panel";
    Object.assign(wrapper.style, {
      position: "absolute",
      top: "20px",
      right: "30px",
      width: "350px",
      height: "400px",
      padding: "20px",
      fontFamily: "'Orbitron', sans-serif",
      bbackground: "rgba(0, 20, 40, 0.65)",
      border: "1px solid rgba(0,255,255,0.3)",
      boxShadow: " 0 0 20px #00eaff inset, 0 0 10px #00eaff",
      borderRadius: "12px",
      color: "#0ff",
      display: "flex",
      flexDirection: "column",
      zIndex: "999",
    });

    document.body.appendChild(wrapper);

    // 添加系统标题
    const title = document.createElement("div");
    title.textContent = "智能控制系统";
    Object.assign(title.style, {
      fontSize: "22px",
      fontWeight: "bold",
      marginBottom: "10px",
      color: "rgb(255, 89, 0)",
    });
    wrapper.appendChild(title);

    // 主内容区（左右分布）
    const content = document.createElement("div");
    Object.assign(content.style, {
      display: "flex",
      flex: 1,
    });
    wrapper.appendChild(content);

    // 左侧参数区域
    const paramList = document.createElement("div");
    Object.assign(paramList.style, {
      width: "10%",
      display: "flex",
      flexDirection: "column",
      gap: "10px",
    });
    content.appendChild(paramList);

    const params = ["温度", "湿度", "重量"];
    const paramColors: Record<string, string> = {
      温度: "#00ff00",
      湿度: "rgb(81 167 255)",
      重量: "#fbcd31",
    };
    params.forEach((name) => {
      const item = document.createElement("div");
      item.textContent = name;
      const color = paramColors[name] || "#ffffff"; // 默认白色
      Object.assign(item.style, {
        padding: "6px 12px",
        background: `${color}20`, // 添加透明度
        borderRadius: "8px",
        cursor: "pointer",
        color: color,
        border: `1px solid ${color}`,
        marginBottom: "8px",
        // ✅ 居中对齐的关键
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        textAlign: "center",
      });

      item.onclick = () => {
        renderChart(name, color); // 传入颜色
      };

      paramList.appendChild(item);
    });

    // 右侧图表区域
    const chartWrapper = document.createElement("div");
    chartWrapper.id = `${id}-chart`;
    Object.assign(chartWrapper.style, {
      flex: 1,
      marginLeft: "15px",
      position: "relative",
      padding: "12px",
      border: "2px solid #00ffff",
      borderRadius: "10px",
      boxShadow:"0 0 20px rgba(0,255,255,0.4), inset 0 0 10px rgba(0,255,255,0.2)",
      background: "rgba(0, 20, 40, 0.65)",
        
    });
    content.appendChild(chartWrapper);

    // 初始化 chart
    const chart = echarts.init(chartWrapper);
    function renderChart(name: string, color: string) {
      const dummyData = Array.from({ length: 10 }, () => Math.random() * 100);
      chart.setOption({
        title: { text: `${name}`, textStyle: { color } },
        xAxis: { type: "category", data: dummyData.map((_, i) => i + 1) },
        yAxis: { type: "value" },
        series: [
          {
            data: dummyData,
            type: "line",
            lineStyle: {
              color: color,
            },
            itemStyle: {
              color: color,
            },
          },
        ],
      });
    }
    renderChart("温度", "#00ff00");
  }

  return wrapper;
}

export { createLabelads, createDashboardPanel, labelRenderer };
